Day21：日夜主題切換(1)

2023 iThome 鐵人賽

DAY 21

自我挑戰組

網站主題切換功能系列第 21 篇

15th鐵人賽

May0240

2023-10-01 17:48:26

185 瀏覽

分享至

前言

在接下來的幾天中，我將要嘗試實作"日夜主題切換"功能，我預計使用 JavaScript 監測當前時間，當進入夜晚時，網頁將會自動切換網站的主題背景為"夜間主題"。
今天的目標為重新排序、組織我的程式碼，優化方法之間的排列順序，同時將映射物件寫到方法中。我也會簡單列出我期望實現的"日夜主題切換"功能相關細節。

重新組織 JavaScript 中的方法

一、初始化和元素設定

首先，我將放置初始化以及元素設定相關的方法。

constructor()

在這裡我會將需要負責初始化方法放到此處，以下為程式碼內容：

constructor() {
    this.initializeElements();
    this.setupEventListeners();
    this.loadSettings();
    this.setupAutoSwitch();
}

initializeElements()

此方法負責初始化所有元素，this.bodyClassList 設定也放到這邊，最後還有映射物件也放到此方法中，以下為部分程式碼：

// 映射物件
this.themeMap = {
  "default-theme": "defaultThemeButton",
  "light-theme": "lightThemeButton",
  "night-theme": "nightThemeButton",
  "nature-theme": "natureThemeButton",
};

二、設定事件監聽器

由於我之前新增方法時，寫的位置都沒有固定，導致我的 setupEventListeners() 方法被移到很後面，每次要尋找事件監聽器都會花一些時間。

所以我重新將確保事件監聽器的 setupEventListeners() 方法移至 initializeElements() 方法之後，確保在所有元素初始化後設定監聽器。

三、事件處理和設定

我將事件處理和與設定相關的方法放在一起，這樣在讀這段程式碼的時候就可以簡單找到相關設定。

設定主題、字體和字型大小的事件處理，另外還有預覽主題的事件處理
- setupThemeButtons()
- setupFonts()
- setupFontSizes()
- setupThemeOptionEvents()
載入網頁時的設定
- loadSettings()：此方法負責處理網頁載入時，主題、字體和字型大小的設定

loadSettings() {
    const nowThemeJSON = localStorage.getItem("theme");
    const nowFontJSON = localStorage.getItem("font");
    const nowFontSizeJSON = localStorage.getItem("fontSize");

    this.nowTheme = nowThemeJSON || "default-theme";
    this.nowFont = nowFontJSON || "default-font";
    this.nowFontSize = nowFontSizeJSON || "default-font-size";

    this.updateClassList(this.themeMap, "themeMenu", this.nowTheme);
    this.updateClassList(this.fontMap, "fontChangeMenu", this.nowFont);
    this.updateClassList(this.fontSizeMap, "fontSizeMenu", this.nowFontSize);

    this.applySettings();
}

設定主題、字體和字型大小
- changeTheme()
- changeFont()
- changeFontSize()

將原先 setTheme() 等方法中的相關程式碼提取成以上方法，並且在方法最後統一使用 applySetting() 方法設定主題。以下為部分程式碼：

changeTheme(themeName) {
    this.nowTheme = themeName;
    this.updateClassList(this.themeMap, "themeMenu", this.nowTheme);
    this.applySettings();
}

四、功能相關

剩下的方法就按照功能和相關性來排序。

側邊欄和 To Do 表單
- openSidebar()
- closeSidebar()
- handleTodoFormSubmit(e)
預覽主題相關方法
- previewTheme(themeId)
- hideThemePreview()
與設定相關的方法
- showToggleElement(elementName)：顯示子選單設定選項
- saveSettings()：儲存設定
- resetSettings()：重置設定
- setTheme(themeName)
- setFont(font)
- setFontSize(fontSize)
- applySettings()：更新 <body> 類別
捕捉網頁的方法
- captureWebpageScreenshot()
To Do 相關方法
- hideCompletedContainer()
- createTodoItem(inputValue)
- handleDeleteButtonClick(todoItemDiv)
- handleCheckboxChange(checkboxInput, todoItemDiv)